<template>
  <div class="comment-item py-3 px-2 hover:bg-gray-50 transition-colors duration-200"
    :class="{ 'bg-blue-50': isHighlighted }" :id="`comment-${comment.id}`">
    <div class="flex gap-3">
      <img :src="comment.author.avatar || '/default-avatar.png'" class="w-10 h-10 rounded-full flex-shrink-0"
        :alt="comment.author.name">
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2">
          <span class="font-medium text-sm text-gray-900">{{ comment.author.name }}</span>
          <span class="text-xs text-gray-500">{{ formatDate(comment.createdAt) }}</span>
        </div>

        <div class="mt-1">
          <p class="text-sm text-gray-800 break-words">
            <span v-if="comment.parentAuthor" class="text-blue-600">
              回复 @{{ comment.parentAuthor }}
            </span>
            {{ comment.content }}
          </p>

          <div class="flex gap-4 mt-2 text-xs text-gray-500">
            <button class="hover:text-blue-600 flex items-center gap-1" @click="handleReply">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              回复
            </button>
            <button class="hover:text-red-600 flex items-center gap-1" @click="emit('delete', comment.id)">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
              删除
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Comment } from '~/types/comment'

const props = defineProps({
  comment: {
    type: Object as () => Comment & { parentAuthor?: string },
    required: true
  }
})

const emit = defineEmits(['reply', 'delete'])

const isHighlighted = ref(false)

const formatDate = (date: string | Date) => {
  return new Date(date).toLocaleString()
}

const handleReply = () => {
  emit('reply', props.comment)
  isHighlighted.value = true
  setTimeout(() => {
    isHighlighted.value = false
  }, 2000)
}
</script>

<style scoped>
.comment-item {
  border-radius: 8px;
  cursor: pointer;
}
</style>